<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
	<head>
		<title>编辑文章管理</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript"  charset="utf-8" src="${ctxStatic }/scripts/ueditor/ueditor.config.js"></script>
		<script type="text/javascript"  charset="utf-8"  src="${ctxStatic }/scripts/ueditor/ueditor.all.js"></script>
		<script type="text/javascript">
			$(function() {
				//初始化表单验证
				$("#inputForm").initValidform();
			    
				//初始化编辑器
		        var editor = KindEditor.create('.editor', {
		            width: '100%',
		            height: '350px', 
		            resizeType: 1, 
		            uploadJson: '${ctx}/upload?action=EditorFile&IsWater=1&Type=',
		            fileManagerJson: '${ctx}/qd/upload?action=ManagerFile',
		            allowFileManager: true
		        });
		        var editorMini = KindEditor.create('.editor-mini', {
		            width: '100%',
		            height: '250px',
		            resizeType: 1,
		            uploadJson: '${ctx}/qd/upload?action=EditorFile&IsWater=1&type=',
		            items: [
						'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link']
		        });
		   		 	
		        var options = {
		        		initialFrameWidth:800,
		        		initialFrameHeight:300,
		        		focus:false,
		        };
		        
		        window.UEDITOR_HOME_URL = '${ctxStatic}/scripts/ueditor/';
				var ueditor = new UE.ui.Editor(options);
				ueditor.render("content");
		       
		        //初始化上传控件
		        $(".upload-img").InitUploader({ type:'article', filesize: "", sendurl: "${ctx}/qd/upload", swf: "${ctxStatic}/scripts/webuploader/uploader.swf", filetypes: "" });
		        //$(".upload-video").InitUploader({ type:'course', filesize: "", sendurl: "${ctx}/qd/upload", swf: "${ctxStatic}/scripts/webuploader/uploader.swf", filetypes: "" });
		        //$(".upload-course").InitUploader({ type:'course', btntext: "批量上传", multiple: true, water: true, thumbnail: true, filesize: "", sendurl: "${ctx}/qd/upload", swf: "${ctxStatic}/scripts/webuploader/uploader.swf" });
		      	//$(".upload-classroom").InitUploader({ type:'classroom', btntext: "批量上传", multiple: true, water: true, thumbnail: true, filesize: "", sendurl: "${ctx}/qd/upload", swf: "${ctxStatic}/scripts/webuploader/uploader.swf" });
			});
			
			//添加图片相册
			function addImage(targetObj, data) {
				targetObj.siblings(".upload-name").val(data.name);
				targetObj.siblings(".upload-path").val(data.path);
				targetObj.siblings(".upload-size").val(data.size);
				
			    //插入到相册UL里面
			    var newLi = $('<li>'
			    + '<input type="hidden" name="hid_photo_name" value="'+ data.type + '|' + data.name + '|' + data.path + '|' + data.thumb + '|' + data.size + '|' + data.ext + '" />'
			    + '<input type="hidden" name="hid_photo_remark" value="" />'
			    + '<div class="img-box" onclick="setFocusImg(this);">'
			    + '<img src="${root}/cdn/image/' + data.thumb + '" bigsrc="${root}/cdn/image/' + data.path + '" />'
			    + '<span class="remark"><i>暂无描述...</i></span>'
			    + '</div>'
			    + '<a href="javascript:;" onclick="setRemark(this);">描述</a>'
			    + '<a href="javascript:;" onclick="delImg(this);">删除</a>'
			    + '</li>');
			    newLi.appendTo(targetObj.siblings(".photo-list").children("ul"));

			    //默认第一个为相册封面
			    var focusPhotoObj = targetObj.siblings(".focus-photo");
			    if (focusPhotoObj.val() == "") {
			        focusPhotoObj.val(thumbSrc);
			        newLi.children(".img-box").addClass("selected");
			    }
			}
		</script>
	</head>
	
	<body class="mainbody">
		<form:form id="inputForm" modelAttribute="article" action="${ctx}/cms/article/save" method="post" class="form-horizontal">
			<form:hidden path="id"/>
			<form:hidden path="value" />
			<sys:message content="${message}"/>
			
			<!--导航栏-->
			<div class="location">
				<a href="${ctx}/cms/article/list" class="back"><i></i><span>返回列表页</span></a>
				<a href="${ctx}/center" class="home"><i></i><span>首页</span></a> 
				<i class="arrow"></i> 
				<a href="${ctx}/cms/article/"><span>文章管理</span></a>
				<shiro:hasPermission name="cms:article:edit"><i class="arrow"></i><span>${not empty article.id ? '修改':'添加' }文章管理</span></shiro:hasPermission>
			</div>	
			<div class="line10"></div>
			<!--/导航栏-->
	
			<!--内容-->
			<div id="floatHead" class="content-tab-wrap">
				<div class="content-tab">
					<div class="content-tab-ul-wrap">
						<ul>
							<li><a class="selected" href="javascript:;">基本信息</a></li>
							<li><a href="javascript:;">详细描述</a></li>
							<li><a href="javascript:;">SEO选项</a></li>
						</ul>
					</div>
				</div>
			</div>
	
			<div class="tab-content" >
					            <c:choose>
						            <c:when test="${center==2}">
						            		<c:choose>
												<c:when test="${value=='pic' }">
												<dl>
													<dt>所属栏目</dt>
													<dd>
														<div class="rule-single-select single-select">
															<form:select path="category.id"  htmlEscape="false" maxlength="50" class="required" cssClass="input normal"  datatype="*"  sucmsg=" ">
																<form:option value="0"  label="图片轮播" />
															 </form:select>
														</div>
													</dd>
												</dl>	
												</c:when>
												<c:otherwise>
												<dl>
													<dt>所属栏目</dt>
													<dd>
														<div class="rule-single-select single-select">
															<form:select path="category.id"  htmlEscape="false" maxlength="50" class="required" cssClass="input normal"  datatype="*"  sucmsg=" ">
																<form:option value=""  label="请选择栏目" selected="selected"/>
								        				    	<form:options items="${categoryList}"  itemValue="id"  itemLabel="name"/>	
															 </form:select>
														</div>
													<span class="Validform_checktip">*请选择所属栏目</span>
														</dd>
												</dl>	
													<dl>
														<dt>是否推荐</dt>
														<dd>
															<div class="rule-multi-radio">
															    <form:radiobutton path="isRed"  value="0"  label="不推荐" checked="checked" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请选择是否推荐" errormsg="请选择是否推荐" sucmsg=" "/>
															    <form:radiobutton path="isRed"  value="1"  label="推荐" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请选择是否推荐" errormsg="请选择是否推荐" sucmsg=" "/>
															</div>
																<span class="Validform_checktip">*请选择是否推荐</span>
														</dd>
													</dl>
												</c:otherwise>
											</c:choose>
						            </c:when>
						            <c:otherwise>
						           		<c:choose>
												<c:when test="${value=='pic' }">
												<dl>
													<dt>所属栏目</dt>
													<dd>
														<div class="rule-single-select single-select">
															<form:select path="category.id"  htmlEscape="false" maxlength="50" class="required" cssClass="input normal"  datatype="*"  sucmsg=" ">
																<form:option value="0"  label="图片轮播" />
															 </form:select>
														</div>
													</dd>
												</dl>
												</c:when>
												<c:otherwise>
												<dl>
													<dt>所属栏目</dt>
													<dd>
														<div class="rule-single-select single-select">
															<form:select path="category.id"  htmlEscape="false" maxlength="50" class="required" cssClass="input normal"  datatype="*"  sucmsg=" ">
																<form:option value=""  label="无权添加文章" selected="selected"/>
															 </form:select>
														</div>
													</dd>
												</dl>	
												<dl>
													<dt>是否推荐</dt>
														<dd>
															<div class="rule-multi-radio">
															    <form:radiobutton path="isRed"  value="0"  label="不推荐" checked="checked" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请选择是否推荐" errormsg="请选择是否推荐" sucmsg=" "/>
															    <form:radiobutton path="isRed"  value="1"  label="推荐" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请选择是否推荐" errormsg="请选择是否推荐" sucmsg=" "/>
															</div>
																<span class="Validform_checktip">*请选择是否推荐</span>
														</dd>
													</dl>
												</c:otherwise>
											</c:choose>
						            </c:otherwise>
					            </c:choose>
		<!--	<dl>
	 				<dt>显示状态</dt>
					<dd>
						<div class="rule-multi-radio">
					    	<form:radiobutton path="status"  value="0" label="正常"/>
					   		<form:radiobutton path="status"  value="1" label="未审核"/>
					   	 	<form:radiobutton path="status"  value="2" label="锁定"/>
						</div>
							<span class="Validform_checktip">*请选择状态</span>
					</dd>
				</dl>
				<dl>
					<dt>是否禁止评论</dt>
					<dd>
						<div class="rule-multi-radio">
						    <form:radiobuttons path="isMsg" items="${fns:getDictList('yesno')}"  itemValue="value"  itemLabel="label" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入是否允许评论" errormsg="请输入是否允许评论" sucmsg=" "/>
						</div>	
							<span class="Validform_checktip">*请选择是否禁止评论</span>
					</dd>
				</dl>
				<dl>
					<dt>是否置顶</dt>
					<dd>
						<div class="rule-multi-radio">
						    <form:radiobuttons path="isTop" items="${fns:getDictList('yesno')}"  itemValue="value"  itemLabel="label" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入是否允许评论" errormsg="请输入是否允许评论" sucmsg=" "/>
						</div>
							<span class="Validform_checktip">*请选择是否置顶</span>
					</dd>
				</dl> !-->
			<!--	<dl>
					<dt>是否热门</dt>
					<dd>
						<div class="rule-multi-radio">
						    <form:radiobuttons path="isHot" items="${fns:getDictList('yesno')}"  itemValue="value"  itemLabel="label" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入是否允许评论" errormsg="请输入是否允许评论" sucmsg=" "/>
						</div>
							<span class="Validform_checktip">*请选择是否热门</span>
					</dd>
				</dl> -->	
						<dl style="display: none">
							<dt>是否幻灯片</dt>
							<dd>
								<div class="rule-multi-radio" >
								    <form:radiobuttons path="isSlide" items="${fns:getDictList('yesno')}"  itemValue="value"  itemLabel="label" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入是否允许评论" errormsg="请输入是否允许评论" sucmsg=" "/>
								</div>
									<span class="Validform_checktip">*请选择是否幻灯片</span>
							</dd>
						</dl>
	<!--		<dl>
					<dt>是否管理员发布</dt>
					<dd>
						<div class="rule-multi-radio">
						    <form:radiobuttons path="isSys" items="${fns:getDictList('yesno')}"  itemValue="value"  itemLabel="label" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入是否允许评论" errormsg="请输入是否允许评论" sucmsg=" "/>
						</div>
							<span class="Validform_checktip">*请选择是否管理员发布</span>
					</dd>
				</dl>  -->
				<dl>
					<dt>内容标题</dt>
					<dd>
						<form:input path="title" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入标题" errormsg="请输入标题" sucmsg=" "/>
						<span class="Validform_checktip">*标题最多100个字符</span>
					</dd>
				</dl>
				<dl>
					<dt>TAG标签</dt>
					<dd>
						<form:input path="tags" htmlEscape="false" maxlength="50" class="required" cssClass="input normal"  datatype="*0-500" sucmsg=" "/>
						<span class="Validform_checktip">多个可用英文逗号分隔开，如：a,b</span>
					</dd>
				</dl>
				<dl>
					<dt>图片地址</dt>
					<dd>
						<form:input path="imgUrl" htmlEscape="false" maxlength="50"  cssClass="input normal upload-path" datatype="*"  nullmsg="请上传图片" errormsg="请上传图片" sucmsg=" "/>
						<div class="upload-box upload-img"></div>
						<div class="photo-list">
							<ul>
								<c:forEach items="${articleAlbum }" var="ca">
	                        	<li>
	                        		<input type="hidden" name="hid_photo_name" value="${ca.category }|${ca.fileName }|${ca.orginPath }|${ca.thumbPath }|${ca.albumSize }|jpg">
	                        		<input type="hidden" name="hid_photo_remark" value="${ca.remarks }">
	                        		<div class="img-box" onclick="setFocusImg(this);">
	                        			<img src="${root}/cdn/image/${ca.thumbPath }" bigsrc="${root}/cdn/image/${ca.orginPath }">
	                        			<span class="remark"><i>${empty ca.remarks ? '暂无描述...': ca.remarks}</i></span>
	                        		</div>
	                        		<a href="javascript:;" onclick="setRemark(this);">描述</a>
	                        		<a href="javascript:;" onclick="delImg(this);">删除</a>
	                       		</li>
	                        	</c:forEach>
							</ul>
						</div>
					</dd>
				</dl>
				<dl>
					<dt>排序</dt>
					<dd>
						<form:input path="sortId" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="请输入排序" errormsg="请输入排序" sucmsg=" "/>
						<span class="Validform_checktip">*数字，越小越向前</span>
					</dd>
				</dl>
			</div>
			
			<div class="tab-content"  style="display: none">
<!--  	<dl>
					<dt>调用别名</dt>
					<dd>
						<form:input path="callIndex" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="/^\s*$|^[a-zA-Z0-9\-\_]{2,50}$/" sucmsg=" "/>
						<span class="Validform_checktip">*别名访问，非必填，不可重复</span>
					</dd>
				</dl>-->	
				<dl>
					<dt>外部链接</dt>
					<dd>
						<form:input path="linkUrl" htmlEscape="false" maxlength="100" class="required" cssClass="input normal" />
						<span class="Validform_checktip">填写后直接跳转到该网址</span>
					</dd>
				</dl>
				<dl>
					<dt>内容摘要</dt>
					<dd>
						<form:textarea path="zhaiyao" htmlEscape="false" maxlength="50" class="required" cssClass="input normal"  datatype="*0-255" sucmsg=" "/>
						<span class="Validform_checktip">不填写则自动截取内容前255字符</span>
					</dd>
				</dl>
				<dl>
					<dt>详细内容</dt>
					<dd>
						<form:textarea id="content" path="content" htmlEscape="false"  class="required" datatype="*" nullmsg="请输入详细内容" errormsg="请输入详细内容" sucmsg=" "/>
					</dd>
				</dl>
			</div>
			
			
			<div class="tab-content"  style="display: none">
				<dl>
						<dt>SEO标题</dt>
						<dd>
							<form:input path="seoTitle" htmlEscape="false" maxlength="50" class="required" cssClass="input normal"  datatype="*0-100" sucmsg=" "/>
							<span class="Validform_checktip">100个字符以内</span>
						</dd>
					</dl>
					<dl>
						<dt>SEO关健字</dt>
						<dd>
							<form:input path="seoKeywords" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*0-255" sucmsg=" "/>
							<span class="Validform_checktip">以“,”逗号区分开，255个字符以内</span>
						</dd>
					</dl>
					<dl>
						<dt>SEO描述</dt>
						<dd>
							<form:textarea  path="seoDescription" htmlEscape="false" maxlength="200" class="required" cssClass="input normal"  datatype="*0-255" sucmsg=" "/>
							<span class="Validform_checktip">255个字符以内</span>
						</dd>
					</dl>
			</div>
			<!--/内容-->
	
			<!--工具栏-->
			<div class="page-footer">
				<div class="btn-wrap">
					<input type="submit" name="btnSubmit" value="提交保存" id="btnSubmit" class="btn" /> 
					<input name="btnReturn" type="button" value="返回上一页" class="btn yellow" onclick="javascript:history.back(-1);" />
				</div>
			</div>
			<!--/工具栏-->
		</form:form>
	</body>
</html>

